<template>
  <div class="join-task-data">
    <div class="page-header-main">
      <div class="page-title">
        上传数据
      </div>
    </div>

    <div class="page-task-body">
      <div class="task-title">
        {{ task.name }}
      </div>
      <div class="task-publish">
        {{ task.username }} -- {{ task.create_time }}
      </div>
      <div class="task-value">
        ¥ {{ task.task_value }}
      </div>
      <div class="task-desc">
        {{ task.describe }}
      </div>
    </div>

    <div class="page-task-data">
      <div class="data-item">
        <div class="item-title">
          任务单号
        </div>
        <div class="item-value">
          {{ task.task_num }}
        </div>
      </div>

      <div class="data-item">
        <div class="item-title">
          报名时间
        </div>
        <div class="item-value">
          {{ userJoin.join_time }}
        </div>
      </div>

      <div class="data-item">
        <div class="item-title">
          开始时间
        </div>
        <div class="item-value">
          {{ task.start_time }}
        </div>
      </div>

      <div class="data-item">
        <div class="item-title">
          任务数据
        </div>
        <div class="item-value">
          <textarea v-model="dataBrief"></textarea>
        </div>
      </div>

      <!-- <div class="data-item">
        <div class="item-title">
          数据文件
        </div>
        <div class="item-value">
          <mt-button plain type="default" @click="selectFile">
            选择文件
            <input type="file" style="display: none;" ref="fileSelect" v-on:change="handleChange">
          </mt-button>
        </div>
      </div> -->

      <div class="" style="margin-top: 40px;">
        <mt-button type="primary" @click="uploadData">
          上传数据
        </mt-button>
      </div>
    </div>

    <tab-bar></tab-bar>

  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
import { Toast } from 'mint-ui';
import tabBar from './common/TabBar';
import storeItem from '../utils/store';

export default {
  name: 'joinTaskData',
  data() {
    return {
      taskId: 0,
      task: {},
      userJoin: {},
      dataBrief: '',
    };
  },
  methods: {
    loadTask() {
      axios.get('/task/into_upload_task', {
        params: {
          task_id: this.taskId,
          token: storeItem.getItem('token'),
        },
      }).then((response) => {
        if (response.status === 200 && response.data.status === true) {
          this.task = response.data.data.task;
          this.userJoin = response.data.data.user_join;
        }
      });
    },
    selectFile() {
      this.$refs.fileSelect.click();
      // nativeMethod.selectFile();
    },
    handleChange() {
      console.log(this.$refs.fileSelect.value);
    },
    uploadData() {
      console.log(this.dataBrief, this.taskId);
      // nativeMethod.send(this.dataBrief);
      axios.post('/task/upload_task_data', qs.stringify({
        task_base_id: this.taskId,
        data_brief: this.dataBrief,
        token: storeItem.getItem('token'),
      })).then((response) => {
        if (response.status === 200 && response.data.status === true) {
          Toast({
            message: '上传成功',
            duration: 1500,
          });
          setTimeout(() => {
            this.$router.push({
              name: 'DoingTask',
            });
          }, 1500);
        }
      });
    },
  },
  mounted() {
    this.taskId = this.$route.params.taskId;
    this.loadTask();
  },
  components: {
    'tab-bar': tabBar,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.join-task-data {
  margin-top: -40px;
}
.task-title {
  font-size: 20px;
}
.task-publish {
  display: inline-block;
  float: left;
  margin-left: 20px;
}
.task-desc{
  text-align: left;
  padding: 20px;
  margin-top: 20px;
}
.task-value {
  display: inline-block;
  float: right;
  margin-right: 20px;
}
.page-task-data {
  margin-top: 40px;
}

.data-item {
  font-size: 16px;
  margin-top: 10px;
}
.item-title {
  display: inline-block;
  float: left;
  margin-left: 20px;
  width: 20%;
}
.item-value {
  display: inline-block;
  width: 70%;
}
.item-value textarea {
  width: 100%;
  border: 1px solid #cecccc;
  border-radius: 4px;
  height: 100px;
}

</style>
